<template>
  <div class="main">
    <el-descriptions
      v-if="info.bound"
      v-loading="detailsLoading"
      direction="vertical"
      :column="4"
      border
    >
      <template #title>
        通知设置详情
        <el-button
          type="success"
          :icon="Refresh"
          text
          @click="queryNotificationSettings"
        />
      </template>
      <el-descriptions-item
        label="绑定状态"
        label-align="center"
        align="center"
      >
        <el-button :type="info.bound ? 'success' : 'danger'" text bg>
          {{ info.bound ? "已绑定" : "未绑定" }}
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item
        label="历史遗留设置"
        label-align="center"
        align="center"
      >
        {{ info.legacySettings || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="通知级别"
        label-align="center"
        align="center"
      >
        <el-button
          type="primary"
          text
          bg
          @click="openLevelDialog(info.notificationLevel)"
        >
          {{ info.notificationLevelDesc || "--" }}
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item
        label="文件接收设置"
        label-align="center"
        align="center"
      >
        <el-button
          :type="info.receiveFiles ? 'success' : 'danger'"
          text
          bg
          @click="openFilesDialog(info.receiveFiles)"
        >
          {{ info.receiveFiles ? "接收" : "拒绝" }}
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-alert
      v-else
      :title="info.message"
      type="warning"
      :closable="false"
      effect="dark"
    />
    <FilesReceiveDialog
      ref="filesReceiveRef"
      @refresh="queryNotificationSettings"
    />
    <LevelDialog
      ref="levelRef"
      :options="noticOptions"
      @refresh="queryNotificationSettings"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { getTelegramNotificationSettings } from "@/api/userTelegramApi";
import FilesReceiveDialog from "./components/FilesReceiveDialog.vue";
import LevelDialog from "./components/LevelDialog.vue";
type Info = {
  bound: boolean;
  legacySettings: string;
  message: string;
  notificationLevel: string;
  notificationLevelDesc: string;
  receiveFiles: boolean;
};
const info = ref<Info>({
  bound: true,
  legacySettings: "",
  message: "",
  notificationLevel: "",
  notificationLevelDesc: "",
  receiveFiles: false
});
const noticOptions = [
  {
    value: "ALL",
    label: "接收所有通知"
  },
  {
    value: "BUSINESS_ONLY",
    label: "仅接收业务通知"
  },
  {
    value: "NONE",
    label: "不接收通知"
  }
];
const filesReceiveRef = ref();
const openFilesDialog = (status: boolean) => {
  filesReceiveRef.value?.open(status);
};
const levelRef = ref();
const openLevelDialog = (level: string) => {
  levelRef.value?.open(level);
};
const detailsLoading = ref(false);
const queryNotificationSettings = async () => {
  try {
    detailsLoading.value = true;
    const { data } = await getTelegramNotificationSettings();
    console.log(data);
    info.value = data;
  } catch (error) {
    console.log(error);
  } finally {
    detailsLoading.value = false;
  }
};
onMounted(() => {
  queryNotificationSettings();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
